<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title>仪表盘</title>
</head>
<body>
    <div layout:fragment="title">仪表盘</div>
    
    <div layout:fragment="content">
        <div class="row">
            <!-- 销售总额卡片 -->
            <div class="col-md-4 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">本月销售总额</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${#numbers.formatDecimal(monthlySales, 1, 2) + ' 元'}">0.00 元</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-cash-stack fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 利润卡片 -->
            <div class="col-md-4 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">本月利润</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${#numbers.formatDecimal(monthlyProfit, 1, 2) + ' 元'}">0.00 元</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-graph-up-arrow fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 进货总额卡片 -->
            <div class="col-md-4 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">本月进货总额</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${#numbers.formatDecimal(monthlyPurchases, 1, 2) + ' 元'}">0.00 元</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-cart-plus fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 库存预警 -->
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">库存预警</h6>
                        <a th:href="@{/products/low-stock}" class="btn btn-sm btn-primary">查看全部</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" th:if="${!#lists.isEmpty(lowStockProducts)}">
                            <table class="table table-bordered" id="lowStockTable" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>商品名称</th>
                                        <th>当前库存</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="product : ${lowStockProducts}" th:if="${product.quantity < 10}">
                                        <td th:text="${product.name}">商品名称</td>
                                        <td th:text="${product.quantity}">0</td>
                                        <td>
                                            <a th:href="@{'/purchases/add?productId=' + ${product.id}}" class="btn btn-sm btn-primary">进货</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div th:if="${#lists.isEmpty(lowStockProducts)}" class="text-center py-3">
                            <p class="mb-0">没有库存不足的商品</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热销商品 -->
            <div class="col-md-6 mb-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">热销商品</h6>
                        <a th:href="@{/sales/top-selling}" class="btn btn-sm btn-primary">查看全部</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" th:if="${!#lists.isEmpty(topSellingProducts)}">
                            <table class="table table-bordered" id="topSellingTable" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>商品名称</th>
                                        <th>销售数量</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="product : ${topSellingProducts}">
                                        <td th:text="${product.name}">商品名称</td>
                                        <td th:text="${product.totalQuantity}">0</td>
                                        <td>
                                            <a th:href="@{'/products/detail/' + ${product.id}}" class="btn btn-sm btn-info">详情</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div th:if="${#lists.isEmpty(topSellingProducts)}" class="text-center py-3">
                            <p class="mb-0">暂无销售数据</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快捷操作按钮 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">快捷操作</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <a th:href="@{/products/add}" class="btn btn-primary btn-block">
                                    <i class="bi bi-plus-circle me-2"></i>添加商品
                                </a>
                            </div>
                            <div class="col-md-3 mb-3">
                                <a th:href="@{/purchases/add}" class="btn btn-success btn-block">
                                    <i class="bi bi-cart-plus me-2"></i>商品进货
                                </a>
                            </div>
                            <div class="col-md-3 mb-3">
                                <a th:href="@{/sales/add}" class="btn btn-info btn-block">
                                    <i class="bi bi-cart-check me-2"></i>商品销售
                                </a>
                            </div>
                            <div class="col-md-3 mb-3">
                                <a th:href="@{/products}" class="btn btn-secondary btn-block">
                                    <i class="bi bi-search me-2"></i>库存查询
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <!-- 仪表盘特定的JavaScript -->
    </div>
</body>
</html> 